<template>
  <q-page class="q-pa-md wrapBox" v-loading="loading">
    <div class="nav">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <el-image src="/svgs/modelApplication.svg" style="width: 17px; margin-top: 2px" fit />
        </el-breadcrumb-item>
        <el-breadcrumb-item>模型服务</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ name: 'model-deploy' }">模型部署</el-breadcrumb-item>
        <el-breadcrumb-item><span style="color: #333;">模型部署详情</span></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="datasetBox" style="position: relative">
      <div class="title">模型部署详情</div>
      <div class="contentBox">
        <div class="deployDetailInfo">
          <div class="container">
            <div class="dataBox">
              <div class="row">
                <div class="col flexR">
                  <span class="name">名称:</span>
                  <span>{{ modelInfoData.title }}</span>
                </div>
                <div class="col flexR" :span="8">
                  <span class="name">状态</span>
                  <p>{{ modelInfoData.status === 'stopped' ? '停止' : '启动' }}</p>
                </div>
                <div class="col flexR" :span="4">
                  <span class="name">来源</span>
                  <p>我的部署</p>
                </div>
                <div class="col flexR" :span="10">
                  <span class="name">调用失败次数/总次数</span>
                  <p>{{ modelInfoData.stop_in_seconds }}/6</p>
                </div>
              </div>
              <div class="row">
                <div class="col flexR" :span="2">
                  <span class="name">描述</span>
                  <p>
                    {{ modelInfoData.description }}
                    <el-icon v-if="detailData.title.length > 0">
                      <EditPen />
                    </el-icon>
                    <q-popup-edit v-model="descriptionModel" v-slot="scope"
                      @hide="setDescription(scope, descriptionModel)">
                      <q-input v-model="scope.value" dense autofocus counter
                        @update:model-value="changeInput(scope.value)"
                        @keyup.enter="setDescription(scope, scope.value)" />
                    </q-popup-edit>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="deployContent">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="tabClick">
          <el-tab-pane label="调用指南" name="parameter" class="parameter"
            style="overflow: auto;background-color: #F6F8FA!important;">
            <!--参数配置 start-->
            <div style="padding: 20px;background-color: #FFFFFF">
              <p class="parameter_tit">参数配置</p>
              <div class="parameter_context input">
                <p style="font-size: 14px; margin-bottom: 10px">输入参数</p>
                <el-table class="parameter_table" :data="parameter_input" :header-cell-style="{
                  background: '#f9f9f9',
                  color: '#333',
                  fontWeight: '500',
                  fontSize: '14px',
                  textAlign: 'left',
                  height: '36px'
                }">
                  <el-table-column prop="name" label="名称" />
                  <el-table-column prop="type" label="类型" />
                </el-table>
              </div>
              <div class="parameter_context output">
                <p style="font-size: 14px;margin-bottom: 0;margin-bottom: 10px">输出参数</p>
                <el-table class="parameter_table" :data="parameter_output" :header-cell-style="{
                  background: '#f9f9f9',
                  color: '#333',
                  fontWeight: '500',
                  fontSize: '14px',
                  textAlign: 'left',
                  height: '36px'
                }">
                  <el-table-column prop="name" label="名称" />
                  <el-table-column prop="type" label="类型" />
                </el-table>
              </div>
            </div>
            <!--App认证 start-->
            <appAuthentication @switchState="switchState"></appAuthentication>
          </el-tab-pane>
          <el-tab-pane label="校验" name="predict" class="predict">
            <div class="predictBox">
              <div class="selectPicture editorBox">
                <json-editor-vue v-model="inputInfo" style="height: 400px;width: 400px;margin: 10px 10px 0 10px;"
                  :showBtns="false" :mode="'code'" />
                <el-button type="primary" size="small" plain class="predictionBtn" @click="predictionBtnClick"
                  :loading="btnLoading">预测</el-button>
                <transition name="el-fade-in">
                  <div class="boxWidth" v-if="predictionResult">
                    <div class="disabledBox" @click.stop></div>
                    <json-editor-vue v-model="getinputInfo" style="height: 400px;width: 400px;margin: 10px 10px 0 10px;"
                      :showBtns="false" :mode="'code'" />
                  </div>
                </transition>
              </div>
              <!-- <div class="resultBox" v-if="predictionResult">
                <p class="resultBox_text">预测结果显示</p>
                <div class="resultSuccess">
                  <q-badge rounded color="blue" label="i" style="margin-right: 3px" />
                  预测成功
                </div>
                <pre class="pres"
                  v-predict><code>{{ JSON.stringify([{ name: 'hhc', age: 19 }, { name: 'hhc', age: 19 }, { name: 'hhc', age: 19 }], null, 2) }}</code></pre>
              </div> -->
            </div>
          </el-tab-pane>
          <el-tab-pane label="配置更新记录" name="configurationUpdate" class="configurationUpdate" style="padding: 20px">
            <p class="configurationUpdate_title">参数配置</p>
            <el-table :header-cell-style="{
              background: '#f9f9f9',
              color: '#333',
              fontWeight: '500',
              fontSize: '14px',
              textAlign: 'left',
              height: '56px'
            }" :data="configurationUpdate">
              <el-table-column prop="repository_model_title" label="模型应用名称" />
              <el-table-column prop="repository_model_version_number" label="版本" />
              <el-table-column prop="source" label="计算资源规格">
                <template #default="scope">
                  <span>cpu:{{ scope.row.cpu }} gpu:{{ scope.row.gpu }} 内存:{{ scope.row.memory }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="监控信息" name="monitoringInformation" class="monitoringInformation">
            <p
              style="color: rgb(71, 76, 88); font-size: 14px;height: 48px;line-height: 48px;padding-left: 24px;border-bottom: 1px solid  #E8E8E8;">
              model-bdc6 0.02
            </p>
            <p style="margin-left: 12px; color: rgb(76, 80, 92); font-size: 12px;padding: 0 20px;margin-bottom: 0">
              资源统计信息
            </p>
            <div class="container">
              <div class="echarts">
                <div class="graph">
                  <div style="margin-right: 80px">
                    <h6 style="margin-bottom: 40px">CPU</h6>
                    <div>
                      <div style="display: flex;align-items: center;height: 20px;">
                        <div
                          style="width: 5px;height: 5px;border-radius: 50%;margin-right: 10px;background-color: #288BFF">
                        </div>
                        <div style="color: #288BFF">已用0</div>
                      </div>
                      <div style="display: flex;align-items: center;height: 20px;">
                        <div
                          style="width: 5px;height: 5px;margin-top: 10px;border-radius: 50%;margin-right: 10px;background-color: #EBEDEF">
                        </div>
                        <div style="color: #EBEDEF;margin-top: 10px">已用0</div>
                      </div>
                    </div>
                  </div>
                  <chart-line :chartOption="chartOption1" :chartSize="chastSize1"></chart-line>
                </div>
                <div class="graph">
                  <div style="margin-right: 80px">
                    <h6 style="margin-bottom: 40px">内存</h6>
                    <div>
                      <div style="display: flex;align-items: center;height: 20px;">
                        <div
                          style="width: 5px;height: 5px;border-radius: 50%;margin-right: 10px;background-color: #19CEDA">
                        </div>
                        <div style="color: #19CEDA">已用0</div>
                      </div>
                      <div style="display: flex;align-items: center;height: 20px;">
                        <div
                          style="width: 5px;height: 5px;margin-top: 10px;border-radius: 50%;margin-right: 10px;background-color: #EBEDEF">
                        </div>
                        <div style="color: #EBEDEF;margin-top: 10px">已用0</div>
                      </div>
                    </div>
                  </div>
                  <chart-line :chartOption="chartOption2" :chartSize="chastSize2"></chart-line>
                </div>
                <div class="graph">
                  <div style="margin-right: 80px">
                    <h6 style="margin-bottom: 40px">GPU</h6>
                    <div>
                      <div style="display: flex;align-items: center;height: 20px;">
                        <div
                          style="width: 5px;height: 5px;border-radius: 50%;margin-right: 10px;background-color: #7089F5">
                        </div>
                        <div style="color: #7089F5">已用0</div>
                      </div>
                      <div style="display: flex;align-items: center;height: 20px;">
                        <div
                          style="width: 5px;height: 5px;margin-top: 10px;border-radius: 50%;margin-right: 10px;background-color: #EBEDEF">
                        </div>
                        <div style="color: #EBEDEF;margin-top: 10px">已用0</div>
                      </div>
                    </div>
                  </div>
                  <chart-line :chartOption="chartOption3" :chartSize="chastSize3"></chart-line>
                </div>
              </div>
            </div>
            <div class="monitInfoContent">
              <div style="display: flex; justify-content: flex-start">
                <p style="margin-right: 15px">AI应用调用次数统计</p>
                <el-tooltip class="box-item" effect="light " placement="right-start">
                  <el-button style="
                      transform: scale(0.5);
                      transform-origin: left;
                      margin: 0 0 0 -10px;
                      font-size: 18px;
                      color: #333;
                      border-color: #333;
                    " size="small" circle>?
                  </el-button>
                </el-tooltip>
              </div>
              <div style="border: 1px solid #E5E6EB;display: flex;flex-direction: column;justify-content: flex-start;">
                <div style="display: flex; justify-content: flex-start;padding: 20px 0 0 20px">
                  <span style="font-size: 26px; color: red">{{ monitorInfoData ? monitorInfoData['call_failed_count'] : 0
                  }}</span><span style="margin-top: 12px">/{{ monitorInfoData ? monitorInfoData['call_count'] : 0
}}</span>
                </div>
                <p style="text-align: left;padding: 20px 0 0 20px">失败调用的次数</p>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="事件" name="event" class="event">
            <div style="padding: 20px">
              <el-table :header-cell-style="{
                  background: '#f9f9f9',
                  color: '#333',
                  fontWeight: '500',
                  fontSize: '14px',
                  textAlign: 'left',
                  height: '56px'
                }" :data="eventData">
                <el-table-column prop="eventType" label="事件类型" width="150">
                  <template #default="scope">
                    <div style="display:flex;align-content: center">
                      <el-image src="/svgs/eventIcon.svg" style="width: 20px;margin-right: 5px" fit="contain" />
                      {{ scope.row.type === 'normal' ? '正常' : '' }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="message" label="事件信息" />
                <el-table-column prop="happen_count" label="发生次数" width="100" />
                <el-table-column prop="first_happen_time" label="首次发生时间" width="200" />
              </el-table>
            </div>

          </el-tab-pane>
          <el-tab-pane label="发布服务" name="publishServer" class="predict">
            <el-form ref="setDataRef" :model="publishServerObj" :rules="serverRules" label-width="120px"
              class="demo-ruleForm typeBox" status-icon>
              <div class="row">
                <div class="col">
                  <el-form-item label="服务名称：" prop="title" style="margin-top:10px; width:90%;">
                    <el-input v-model.trim="publishServerObj.title" placeholder="请输入服务名称" show-word-limit
                      spellcheck="false" />
                  </el-form-item>
                  <el-form-item label="服务概述：" prop="description" style="width:90%;">
                    <el-input v-model.trim="publishServerObj.description" type="textarea" spellcheck="false"
                      placeholder="请输入" :rows="5" show-word-limit maxlength="100" />
                  </el-form-item>
                  <el-form-item label="服务配图：" prop="picture" style="width:90%;">
                    <el-upload class="upload-demo uploadBox" drag :http-request="uploadFile" :file-list="uploadFileList"
                      multiple :on-change="handleFileChanged" style="width: 100%;" accept=".jpg,.png" limit="1">
                      <div class="el-upload__text uploadBoxBtn">
                        <el-image :src="imgUrl" fit />
                        <el-button type="primary">上传图片</el-button>
                        <div>点击上传文件按钮，或拖拽文件到这里</div>
                        <div>支持上传文件格式：jpg、png</div>
                      </div>
                    </el-upload>
                  </el-form-item>
                  <el-form-item label="标签：" prop="tags" style="width:90%;">
                    <el-input v-model.trim="publishServerObj.tags" placeholder="请输入标签，多个可用逗号分隔" show-word-limit
                      spellcheck="false" />
                  </el-form-item>
                </div>
                <div class="col">
                  <div>请求参数：</div>
                  <div class="editorBox" style="display:flex;justify-content:center;">
                    <json-editor-vue v-model="publishServerObj.input_example"
                      style="height: 400px;width: 400px;margin: 10px 10px 0 10px;" :showBtns="false" :mode="'code'" />
                  </div>
                </div>
                <div class="col">
                  <div>返回参数：</div>
                  <div class="editorBox">
                    <json-editor-vue v-model="publishServerObj.output_example"
                      style="height: 400px;width: 400px;margin: 10px 10px 0 10px;" :showBtns="false" :mode="'code'" />
                  </div>
                </div>
              </div>
              <div class="bottomBox">
                <el-button type="primary" @click="submitConfirm(setDataRef)">共享</el-button>
              </div>
            </el-form>
            <!-- <div class="selectPicture">
                <json-editor-vue v-model="inputInfo" style="height: 400px;width: 400px;margin: 10px 10px 0 10px;"
                  :showBtns="false" :mode="'code'" />
                  <el-button type="primary" size="small" plain class="predictionBtn"
                  @click="predictionBtnClick" :loading="btnLoading">测试</el-button>
                <transition name="el-fade-in">
                  <div class="boxWidth" v-if="predictionResult">
                    <div class="disabledBox" @click.stop></div>
                    <json-editor-vue v-model="getinputInfo" style="height: 400px;width: 400px;margin: 10px 10px 0 10px;"
                      :showBtns="false" :mode="'code'" />
                  </div>
                </transition>
              </div> -->
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </q-page>
</template>
<script setup lang="ts">

import { ref, shallowRef, reactive, watch } from 'vue';
import { useRouter } from 'vue-router';
import {
  getConfigurationUpdateHandle, //配置更新界面
  getModelDevelopHandle, //模型详情接口
  putDeployDetailData, //描述修改接口
  getEventDataListHandle, //事件界面
  getApiEndpointHandle, //获取模型部署调用指南
  getMonitorInfo, //获取模型部署监控信息
  postInvocations,//校验预测
  getServices, //校验是否有已存在的服务
  postModelServices //发布服务
} from 'src/api/model';
import { modelStore } from 'stores/model';
import type { TabsPaneContext } from 'element-plus';
import appAuthentication from './appAuthentication.vue'; //app认证页面
import chartLine from 'src/components/chartLine.vue';
import jsonEditorVue from 'json-editor-vue3'
import imgUrl from 'assets/dataSet/upload.png'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
//echart图表组件

const router = useRouter();
const projectId = router.currentRoute.value.params.project_id;
const loading = ref(false);

//详情
const modelId = modelStore().model_id;
const stop = ref(3);
const descriptionModel = ref();
const detailData = shallowRef({
  title: '测试测试',
  description: '',
});
let modelInfoData = ref(<any>{}); //模型详情数据
const inputInfo = ref(<any>{})
const getinputInfo = ref(<any>{})
const publishServerObj = ref({
  title: '',
  description: '',
  tags: '',
  model_deployment_id: 0,
  picture: null,
  input_example: {},
  output_example: {},
})
const uploadFileList: any = ref([])
const paramObj = shallowRef()
const btnLoading = ref(false)
const fileListArr = ref([])
const setDataRef = ref<FormInstance>()
const serverRules = reactive<FormRules>({
  title: [
    { required: true, message: '服务名称不能为空', trigger: ['blur', 'change'] }
  ],
  description: [
    { required: true, message: '服务概述不能为空', trigger: ['blur', 'change'] }
  ],
  tags: [
    { required: true, message: '服务概述不能为空', trigger: ['blur', 'change'] }
  ],
  picture: [
    { required: true, message: '标签不能为空', trigger: ['blur', 'change'] }
  ],
})

getModelDevelop(); //获取模型详情

function setDescription(scope: any, str: string) {
  putDeployDetailData(projectId, modelId, { description: str }).then(() => {
    scope.set();
    getModelDevelop(); //获取模型详情
  })
    .catch((error) => {
      console.log(error);
    });
}
function changeInput(str: string) {
  descriptionModel.value = str;
}

//内容
const activeName = ref('parameter');
const predictionResult = ref(false);
watch(() => activeName.value, (newEl, oldEl) => {
  if (newEl == 'publishServer') {
    getServesData()
  }
})
// 获取服务数据
function getServesData() {
  publishServerObj.value.model_deployment_id = modelInfoData.value.id
  publishServerObj.value.input_example = modelInfoData.value.params.input_example
  getServices(projectId, modelId).then((res: any) => {
    console.log(res.data)
  })
}
function switchState(){
  getModelDevelop()
}

//模型详情
function getModelDevelop() {
  getModelDevelopHandle(projectId, modelId).then((res: any) => {
    modelInfoData.value = res.data;
    inputInfo.value = res.data.params.input_example
    parameter_input.value = res.data.params.inputs;
    parameter_output.value = res.data.params.outputs;
    modelStore().setApiEndpoint(res.data);
  });
}

//调用指南 start
//调用指南-参数配置-输入参数内容
const parameter_input = ref([
  {
    name: 'images',
    type: 'file',
  },
]);
//调用指南-参数配置-输出参数内容
const parameter_output = ref([
  {
    name: 'predicted_label',
    type: 'string',
  },
  {
    name: 'scores',
    type: 'string',
  },
]);
// getApiEndpoint(); //获取模型部署调用指南
// function getApiEndpoint() {
//   getApiEndpointHandle(projectId, modelId).then((res: any) => {
//     parameter_input.value = res.data.input;
//     parameter_output.value = res.data.output;
//     modelStore().setApiEndpoint(res.data);
//   });
// }
//调用指南 end

//预测
//预测 start
// const fileList = ref([]); // 图片列表
// const upLoadFileName = ref('');
// const hideUpload = ref(false); // 是否隐藏上传按钮
// // 重新上传图片把上一张图片删除 顺便把文件名称显示
// function fileChange(file: any, fileList: any[]) {
//   const { name } = file;
//   upLoadFileName.value = name;

//   if (fileList.length > 1) {
//     fileList.shift();
//   }
// }
// const isPredictionBtnClick = ref(false);
// //预测按钮点击
// const predictionBtnClick = () => {
//   isPredictionBtnClick.value = true;
//   predictionResult.value = true;
// };

// 预测
const predictionBtnClick = () => {
  predictionResult.value = false
  btnLoading.value = true
  let secretObj={
    secret: modelInfoData.value.app_secret
  }
  if(!modelStore().api_endpoint.is_auth_required){
    delete secretObj.secret
  }

  postInvocations(modelInfoData.value.app_key, inputInfo.value, secretObj).then((res: any) => {
    getinputInfo.value = JSON.parse(res.data)
    predictionResult.value = true
    btnLoading.value = false
  }).catch(error => {
    btnLoading.value = false
  })
}

// const vPredict = {
//   mounted: (el: HTMLElement) => {
//     let blocks = el.querySelectorAll('pre code');
//     blocks.forEach((block) => {
//       let ul = document.createElement('ul');
//       let rowCount = block.outerHTML.split('\n').length;
//       for (let i = 1; i <= rowCount; i++) {
//         let li = document.createElement('li');
//         let text = document.createTextNode(i);
//         li.className = 'li-numbering';
//         li.appendChild(text);
//         ul.appendChild(li);
//       }
//       ul.className = 'pre-numbering';
//       block.parentNode.appendChild(ul);
//     });
//   },
// };
//预测 end

//配置更新记录 start
//配置更新记录-表格数据
const configurationUpdate = ref([
  {
    modelAppName: 'model-bdc6',
    type: '2',
    source: 'CPU: 2核8GB',
  },
]);
//配置更新记录 end

//事件 start
//事件-表格数据
const eventData = ref([
  {
    eventType: '正常',
    eventInfo: '123123123123123123123123123123123123123',
    eventNumbers: '2',
    firstOccurrence: '2023/06/20 15:55:13',
  },
]);
//事件 end

//监控信息 start

const monitorInfoData = ref(null);//监控信息数据
//第一个图标参数配置
const chastSize1 = reactive({
  width: '160px',
  height: '160px',
});
const chartOption1 = ref({
  color: ['#6BC9A8', '#D9D9D9'],
  legend: {
    type: 'scroll',
    orient: 'vertical',
    show: false,
    right: 0,
    top: 50,
    width: 50,
    bottom: 20,
    textStyle: {
      fontSize: 7,
    },
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      silent: false,
      label: {
        normal: {
          fontSize: '12',
          position: 'center',
          color: '#000',
          formatter: function () {
            return '0%';
          },
        },
      },
      labelLine: {
        normal: {
          show: false,
        },
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '12', // 设置为与正常状态相同的字体大小
          fontWeight: 'bold',
        },
      },
      data: [
        {
          value: 0,
          name: '可用',
          itemStyle: {
            color: '#288BFF',
          },
        },
        {
          value: 0,
          name: '已用',
          itemStyle: {
            color: '#EBEDEF',
          },
        },
      ],
    },
  ],
});


//第二个图标参数配置
const chastSize2 = reactive({
  width: '160px',
  height: '160px',
});
const chartOption2 = ref({
  color: ['#6BC9A8', '#D9D9D9'],
  legend: {
    type: 'scroll',
    orient: 'vertical',
    show: false,
    right: 0,
    top: 50,
    width: 50,
    bottom: 20,
    textStyle: {
      fontSize: 7,
    },
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      silent: false,
      label: {
        normal: {
          fontSize: '12',
          position: 'center',
          color: '#000',
          formatter: function () {
            return '0%';
          },
        },
      },
      labelLine: {
        normal: {
          show: false,
        },
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '12', // 设置为与正常状态相同的字体大小
          fontWeight: 'bold',
        },
      },
      data: [
        {
          value: 0,
          name: '可用',
          itemStyle: {
            color: '#19CEDA',
          },
        },
        {
          value: 0,
          name: '已用',
          itemStyle: {
            color: '#EBEDEF',
          },
        },
      ],
    },
  ],
});

//第三个图标参数配置
const chastSize3 = reactive({
  width: '160px',
  height: '160px',
});
const chartOption3 = ref({
  color: ['#6BC9A8', '#D9D9D9'],
  legend: {
    type: 'scroll',
    orient: 'vertical',
    show: false,
    right: 0,
    top: 50,
    width: 50,
    bottom: 20,
    textStyle: {
      fontSize: 7,
    },
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      silent: false,
      label: {
        normal: {
          fontSize: '12',
          position: 'center',
          color: '#000',
          formatter: function () {
            return '0%';
          },
        },
      },
      labelLine: {
        normal: {
          show: false,
        },
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '12', // 设置为与正常状态相同的字体大小
          fontWeight: 'bold',
        },
      },
      data: [
        {
          value: 0,
          name: '可用',
          itemStyle: {
            color: '#7089F5',
          },
        },
        {
          value: 0,
          name: '已用',
          itemStyle: {
            color: '#EBEDEF',
          },
        },
      ],
    },
  ],
});

//监控信息 end



//全局页面tab切换事件
const tabClick = (tab: TabsPaneContext, event: Event) => {
  let tabData: any = JSON.parse(JSON.stringify(tab));
  if (tabData.props.label === '事件') {
    getEventDataListHandle(projectId, modelId).then((res: any) => {
      eventData.value = res.data;
    });
  }
  if (tabData.props.label === '配置更新记录') {
    getConfigurationUpdateHandle(projectId, modelId).then((res: any) => {
      configurationUpdate.value = res.data;
    });
  }
  if (tabData.props.label === '监控信息') {
    getMonitorInfo(projectId, modelId).then((res: any) => {
      chartOption1.value.series[0].data[0].value = res.data.cpu_used;
      chartOption1.value.series[0].data[1].value = res.data.cpu_available;
      chartOption2.value.series[0].data[0].value = res.data.memory_used;
      chartOption2.value.series[0].data[1].value = res.data.memory_available;
      chartOption3.value.series[0].data[0].value = res.data.gpu_used;
      chartOption3.value.series[0].data[1].value = res.data.gpu_available;
      monitorInfoData.value = res.data;
    })
  }
}
// 发布服务部分

// 文件上传
function uploadFile(obj: any) {
  console.log(obj)
  paramObj.value = new FormData()
  paramObj.value.append("picture", obj.file)
  publishServerObj.value.picture=obj.file
  console.log(paramObj.value)
}
// 文件校验
const handleFileChanged = (file: any, fileList: any) => {
  if (fileList.length > 1) {
    fileList.shift()
  }
  fileListArr.value = fileList
  // 检查是否有重复文件
  if (fileList.findIndex((f: any) => f.name === file.name) != fileList.findLastIndex((f: any) => f.name === file.name)) {
    ElMessage.error(file.name + "该文件已存在")
    fileList.pop()
  }
}
const submitConfirm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      paramObj.value.append("title", publishServerObj.value.title)
      paramObj.value.append("description", publishServerObj.value.description)
      paramObj.value.append("model_deployment_id", publishServerObj.value.model_deployment_id)
      paramObj.value.append("tags", publishServerObj.value.tags.replace('，',','))
      paramObj.value.append("input_example", JSON.stringify(publishServerObj.value.input_example))
      paramObj.value.append("output_example", JSON.stringify(publishServerObj.value.output_example))
      postModelServices(paramObj.value).then((res: any) => {
        ElMessageBox.alert('发布服务成功', '提示', {
          confirmButtonText: 'ok',
          autofocus: false
        }).then(() => {
          console.log(res)
        })
      }).catch(error => {
        console.log(error)
      })
    } else {
      console.log('error submit!', fields)
    }
  })

}
</script>
<style scoped lang="scss">
.wrapBox {
  padding: 0 !important;

  .nav {
    display: flex;
    align-items: center;
    padding-left: 20px;
    cursor: pointer;
    background-color: #f6f8fa;
    height: 46px;

    ::v-deep .el-breadcrumb {
      display: flex;
      align-items: center;
    }
  }

  .datasetBox {
    margin: 0 20px;

    .title {
      width: 100%;
      padding: 12px;
      box-sizing: border-box;
      background-color: #fff;
      color: #333;
      font-size: 16px;
      font-weight: 500;
      text-align: left;
      line-height: 24px;
      border-bottom: 2px solid #f6f8fa;
    }

    .subTitle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #333;
      font-size: 16px;
      background-color: #fff;
      padding: 12px 12px 0 12px;
      border-bottom: 2px solid #f6f8fa;
    }

    .contentBox {
      padding: 12px;
      background-color: #ffffff !important;

      .demo-tabs {
        margin-top: 40px;
      }
    }
  }
}

//面包屑斜杆
::v-deep .el-breadcrumb__separator {
  font-size: 14px !important;
  color: #c9cdd4 !important;
  margin-top: 2px !important;
}

//面包屑字体颜色
::v-deep .el-breadcrumb__inner {
  color: #666 !important;
}

::v-deep .el-tabs__active-bar {
  display: none;
}

::v-deep .el-breadcrumb__inner.is-link,
.el-breadcrumb__inner a {
  font-weight: normal !important;
}



.deployDetailTitle {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 45px;
  line-height: 40px;
  border-bottom: 1px dashed #ccc;

  .el-icon,
  .q-breadcrumbs__el {
    color: #1d1d1d;
  }
}

.deployDetailInfo {
  .container {
    padding: 5px 0 0 10px;
    font-size: 12px;

    .dataBox {
      .row {
        .flexR {
          display: flex;
          flex-direction: row;

          .name {
            margin-right: 5px;
          }
        }

        i {
          font-style: initial;
          color: #333333;
        }
      }

      .name {
        color: #5c5858;
      }
    }
  }

  .el-radio {
    ::v-deep .el-radio__inner {
      border-color: rgb(153, 153, 153) !important;
      background-color: rgb(153, 153, 153) !important;
    }

    ::v-deep .el-radio__label {
      font-size: 12px;
      color: rgb(153, 153, 153) !important;
    }
  }
}

//去除tab切换的下划线
:deep(.el-tabs__nav-wrap::after) {
  height: 0;
}

//end
:deep(.el-tabs__nav-scroll) {
  background-color: #fff;
}

:deep(.el-tabs__item) {
  margin: 10px;
}

:deep(.el-tabs__item.is-active) {
  margin: 10px;
  padding: 10px !important;
  background-color: #EDEFFE;
  color: #3D5CE4;
}

:deep(.el-tabs__header) {
  margin: 0 !important;
}

.deployContent {
  margin-top: 20px;

  .demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }

  .el-tab-pane {
    background-color: #fff;
    width: 100%;
    margin-top: 20px;
  }

  //调用指南 start
  .parameter {
    .parameter_tit {
      font-size: 14px;
      color: #333;
      font-weight: 500;
      margin-bottom: 5px;
      height: 38px;
      border-bottom: 1px solid #e8e8e8;
    }

    .parameter_context {
      background-color: #fff;

      p {
        padding-left: 10px;
        padding-top: 10px;
        font-size: 12px;
        color: #666;
        font-weight: 500;
      }

      .parameter_table {
        font-size: 12px;
      }
    }

    .output {
      margin-top: 10px;
    }
  }

  //调用指南 end

  //预测 start
  .predict {
    position: relative;

    .predictBox {
      display: flex;

      .selectPicture {
        display: flex;
      }

      .resultBox {
        max-width: 300px;
        margin-top: 50px;

        .resultBox_text {
          color: rgb(85, 85, 85);
          font-size: 12px;
          margin-bottom: 5px;
        }

        .resultSuccess {
          width: 250px;
          height: 40px;
          padding-left: 10px;
          line-height: 40px;
          font-size: 12px;
          background-color: rgb(230, 247, 255);
          border-radius: 5px;
          border: 1px solid rgb(145, 213, 255);
        }
      }
    }

    ::v-deep .el-upload-list {
      height: 300px;
    }

    ::v-deep .el-upload--picture-card {
      width: 60px;
      height: 20px;
      color: #1d1d1d;
      font-weight: bold;
      border-radius: 0;
      line-height: 50px;
      font-size: 12px;
      border: 1px solid rgb(118, 118, 118);
      margin-top: 5px;
      background-color: rgb(239, 239, 239);
    }

    ::v-deep .el-upload-list--picture-card .el-upload-list__item-thumbnail {
      object-fit: cover !important;
    }

    ::v-deep .el-upload-list__item {
      position: relative;
      top: 65px;
      left: -140px;
      width: 230px;
      height: 230px;
    }

    ::v-deep .el-upload--picture-card {
      position: fixed;
      top: 316px;
      margin-left: 15px;
    }
  }

  //预测 end

  //配置更新记录 start
  .configurationUpdate {
    .configurationUpdate_title {
      color: rgb(16, 16, 16);
    }
  }

  //配置更新记录 start

  //监控信息 start
  .monitoringInformation {

    .container,
    .echarts {
      width: 100%;
      display: flex;
      flex-direction: row;
    }

    .container {
      justify-content: space-between;
      padding: 20px;
    }

    .echarts {
      display: flex;
      justify-content: space-between;

      .graph {
        padding: 20px;
        display: flex;
        flex: 1;
        justify-content: center;
        align-content: center;
        height: 200px;
        line-height: 200px;
        margin-right: 20px;
        border: 1px solid #E5E6EB;
      }

      .graph:last-child {
        margin-right: 0;
      }
    }

    .monitInfoContent {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      margin-top: 10px;
      width: 30%;
      padding-left: 20px;
    }
  }

  //监控信息 end

  ::v-deep .el-tabs__item {
    font-size: 13px !important;
  }

  .pres {
    position: relative;
    top: 5px;
    background-color: rgb(255, 255, 255);
    color: #0aba12;
    padding-left: 50px;
    height: 210px;
    overflow: auto;

    .btn-copy {
      display: none;
      position: absolute;
      right: 10px;
      top: 10px;
    }

    &:hover {
      .btn-copy {
        display: block;
        cursor: pointer;
      }
    }

    &::-webkit-scrollbar {
      width: 5px;
      height: 5px;
      background: rgba(0, 0, 0, 0.1);
      /*可以设置轨道颜色*/
      padding-right: 2px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.1);
      border-radius: 1px;
    }
  }

  ::v-deep .pre-numbering {
    position: absolute;
    padding-left: 0;
    top: -8px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 20px;
    text-align: center;
    padding-top: 8px;
    background-color: rgb(247, 247, 247);

    .li-numbering {
      list-style: none;
      color: #0aba12;
    }
  }


  .editorBox {

    .container {
      &:deep(.json-editor-vue) {
        .jsoneditor {
          border: 1px solid #ccc;
        }

        .jsoneditor-menu {
          display: none;
        }

        .jsoneditor-outer.has-main-menu-bar {
          margin-top: 0;
          padding-top: 0;
          margin-bottom: 0 !important;
          padding-bottom: 0 !important;
        }
      }

      &:deep(.full-screen) {
        display: none !important;
      }
    }

    .boxWidth {
      position: relative;

      .disabledBox {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 99;
        cursor: no-drop;
      }
    }

    .predictionBtn {
      margin: 10px 0 0 0;
    }
  }

  .bottomBox {
    display: flex;
    justify-content: end;
    padding: 40px 0 20px 0;
  }

  .uploadBox {
    .uploadBoxBtn {
      .el-image {
        width: 56px;
        height: 56px;
        display: block;
        margin: 0 auto;
      }
    }

    &:deep(.el-upload-list) {
      height: auto;
    }
    &:deep(.el-upload-list__item) {
      position: initial;
      width: auto;
      height: auto;
    }
  }
}
</style>
